<template>
	<view>
		<!-- 搜索框 -->
		<!-- @custom = "getGoods" -->
		<view class="search_view">
			<u-search
				shape="square"
				:show-action="true" 
				action-text="搜索" 
				:clearabled="true"  
				:animation="true" 
				@change = "getGoods"
				>
			</u-search>
		</view>
		<view class="list" v-if="buffer">
			<view class="row" v-for="(item,index) in  goods" :key="item.id">
				<image :src="baseUrl + item.img" mode="widthFix"></image>
				<view class="info">
					<text>{{ item.goodsname }}</text>	
					<text>￥{{ item.price }}</text>	
					<text>3565评论</text>	 
				</view>
			</view>
		</view>
		<view class="api" v-else>
			<!-- 无数据提示 -->
			<u-empty 
				text="暂无数据~~换个关键字试一试~~" mode="list" 
				:show="!buffer" 
				color="orange" icon-color="orange"
			></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$URL,
				buffer:false,//页面显示开关,
				goods:[],//商品集合
			}
		},
		onLoad(options){
			
		},
	
		methods: {
			async getGoods(val){
				console.log(val)
				// 可以执行搜索
				var option  = {
					url:"search",
					data:{
						keywords:val
					}
				}
				let res =  await this.$http(option);
				// console.log(res)
				if(res.data.list == null){
					// 没有数据
					this.buffer = false
				}else{
					this.buffer =true
					this.goods = res.data.list
				}
			}
		},
		
	}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/search.css");
</style>
